import { DownloadOutlined } from '@ant-design/icons';
import { Button, Checkbox, Radio, Space, Table, Tag, Image } from 'antd';
import Card from 'antd/lib/card';
import Cascader from 'antd/lib/cascader';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import Input from 'antd/lib/input';
import Column from 'antd/lib/table/Column';
import ColumnGroup from 'antd/lib/table/ColumnGroup';
import { TableRowSelection } from 'antd/lib/table/interface';
import { useState } from 'react';

import sty from './index.less';

const Goods: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div>
      <Card>
        <div className={sty.head}>
          <div className={sty.headList}>
            商品名称
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>
          <div className={sty.headList}>
            SPU
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>
          <div className={sty.headList}>
            SKU
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>

          <div className={sty.headList}>
            UPC
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>

          <div className={sty.headList}>
            门店
            <div className={sty.leftM}>
              <Input placeholder="请选择，最多选择5项" />
            </div>
          </div>

          <div className={sty.headList}>
            在线状态
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>

          <div className={sty.headList}>
            门店分类
            <div className={sty.leftM}>
              <Cascader
                options={option}
                onChange={onChange}
                placeholder="Please select"
                size="middle"
              />
            </div>
          </div>

          <div className={sty.headList}>
            商品类目
            <div className={sty.leftM}>
              <Cascader
                options={options}
                onChange={onChange}
                placeholder="Please select"
                size="middle"
              />
            </div>
          </div>

          <div className={sty.headList}>
            渠道库存
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>

          <div className={sty.headList}>
            审核状态
            <div className={sty.leftM}>
              <Input placeholder="请输入" />
            </div>
          </div>
        </div>

        <div>
          <Checkbox.Group
            options={optionsWithDisabled}
            defaultValue={['Apple']}
            onChange={onChanges}
          />
        </div>
      </Card>

      <Card>
        <div className={sty.marginB}>
          <Space wrap>
            <Button className={sty.marginL} type="primary" size="middle">
              新增商品
            </Button>
            <Button type="primary" size="middle">
              批量操作
            </Button>

            <Radio.Group value="middle" onChange={(e) => e.target.value}>
              <Radio.Button value="large">上架</Radio.Button>
              <Radio.Button value="default">下架</Radio.Button>
              <Radio.Button value="small">修改定价方式</Radio.Button>
              <Radio.Button value="small">设置店铺价格</Radio.Button>
            </Radio.Group>
          </Space>
        </div>
        <div>
          <Table rowSelection={rowSelection} dataSource={data}>
            <Column
              title="商品信息"
              dataIndex="firstName"
              key="firstName"
              render={(firstName) => (
                <>
                  <div>{firstName.name}</div>
                  <Image width={100} src={firstName.imageMy} />
                </>
              )}
            />
            <Column title="规格信息" dataIndex="lastName" key="lastName" />

            <Column title="采购价" dataIndex="age" key="age" />
            <Column title="月售" dataIndex="address" key="address" />
            <Column
              title="渠道信息"
              dataIndex="tags"
              key="tags"
              render={(tags: string[]) => (
                <>
                  {tags.map((tag) => (
                    <Tag color="blue" key={tag}>
                      {tag}
                    </Tag>
                  ))}
                </>
              )}
            />
            <Column
              title="操作"
              key="action"
              render={(_: any, record: DataType) => (
                <Space size="middle">
                  <a>编辑</a>
                  <a>修改采购价</a>
                </Space>
              )}
            />
          </Table>
        </div>
      </Card>
    </div>
  );
};

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
  },
];

interface DataType {
  key: React.Key;
  firstName: { name: string; imageMy: string };
  lastName: string;
  age: number;
  address: string;
  tags: string[];
}

const data: DataType[] = [
  {
    key: '1',
    firstName: {
      name: 'John',
      imageMy: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: {
      name: 'Jim',
      imageMy:
        'https://img1.baidu.com/it/u=4282222496,2200736924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
    },
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: {
      name: 'Joe',
      imageMy:
        'https://img1.baidu.com/it/u=105101192,4203910896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
    },
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const optionsWithDisabled = [
  { label: '平台零售', value: 'Apple' },
  { label: '平台下架', value: 'Pear' },
  { label: '标品', value: 'Orange', disabled: false },
  { label: '无图', value: 'Pearw' },
  { label: '有设置卖点', value: 'Peary' },
];
const option = [
  {
    value: 'shijie',
    label: '中国世界',
  },
  {
    value: 'dengda',
    label: '恒大',
  },
];

const onChange = (value: string[]) => {
  console.log(value);
};
const onChanges = (checkedValues: CheckboxValueType[]) => {
  console.log('checked = ', checkedValues);
};

export default Goods;
